<template>
  <TodoHeader @add-todo="handleAddTodo" />
  <TodoList>
    <!-- 拖拽功能 -->
    <draggable v-model="todos" item-key="id">
      <template v-slot:item="obj">
        <TodoItem
          v-bind="obj.element"
          @update="handleUpdateTodo"
          @toggle="handleToggleTodo"
          @delete="handleDeleteTodo"
        ></TodoItem>
      </template>
    </draggable>
  </TodoList>
  <TodoFooter
    :todos="todos"
    @toggle-all="handleToggleAll"
    @clear-done="handleClearDone"
    @clear-all="handleClearAll"
  />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoItem from './components/TodoItem.vue'
import draggable from 'vuedraggable'
// 在App组件中保存数据
const todos = ref([])

// 接收数据，填入数组
const handleAddTodo = (todo) => {
  todos.value.push(todo)
  console.log(todos.value)
}

const handleUpdateTodo = (id, value) => {
  // 根据id查找todo对象
  const todo = todos.value.find((item) => item.id === id)
  todo.content = value
}

const handleToggleTodo = (id, value) => {
  const todo = todos.value.find((item) => item.id === id)
  todo.done = value
}

const handleDeleteTodo = (id) => {
  const index = todos.value.find((item) => item.id === id)
  todos.value.splice(index, 1)
}
// 只要选中框被选中，就把所有事项改成已办事项true。取消选中，false
const handleToggleAll = (checked) => {
  todos.value.forEach((item) => {
    item.done = checked
  })
}
// 留下未完成
const handleClearDone = () => {
  todos.value = todos.value.filter((item) => !item.done)
}
const handleClearAll = () => {
  todos.value = []
}
// 数据持久化
watch(
  todos,
  () => {
    localStorage.getItem('todoLists', JSON.stringify(todos.value))
  },
  { deep: true }
)
onMounted(() => {
  // 从localStorage中获取数据
  const todoLists = JSON.parse(localStorage.getItem('todoLists') || '[]')
  todos.value = todoLists
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
